<template>
  <div class="math">
    <div class="title">
    </div>
    <div class="close">
      <router-link to="/chengbao"><button class="btn_go"></button></router-link>
    </div>
    <div class="nav1">
      <router-link to="/chengbao/math1"><button class="btn_go"></button></router-link>
    </div>
    <div class="nav2">
      <router-link to="/chengbao/math2"><button class="btn_go"></button></router-link>
    </div>
    <div class="nav3">
       <router-link to="/chengbao/math3"><button class="btn_go"></button></router-link>
    </div>
    <div class="shang">
    </div>
    <div class="xia">
    </div>
    <div class="shang1">
      <router-link v-show="up_link1" to="/chengbao/math1/mathup1"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="shang2">
      <router-link v-show="up_link1" to="/chengbao/math1/mathup2"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="shang3">
      <router-link v-show="up_link1" to="/chengbao/math1/mathup3"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="shang4">
      <router-link v-show="up_link1" to="/chengbao/math1/mathup4"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="xia1">
       <router-link v-show="down_link1" to="/chengbao/math1/mathdown1"><button class="btn_go"></button></router-link>
       <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link> 
    </div>
    <div class="xia2">
       <router-link v-show="down_link1" to="/chengbao/math1/mathdown2"><button class="btn_go"></button></router-link> 
       <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="xia3">
       <router-link v-show="down_link1" to="/chengbao/math1/mathdown3"><button class="btn_go"></button></router-link>
       <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link> 
    </div>
    <div class="xia4">
       <router-link v-show="down_link1" to="/chengbao/math1/mathdown4"><button class="btn_go"></button></router-link>
       <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link> 
    </div>
  </div>
</template>

<script>
export default {
  name: 'read',
  data () {
    return {
      up_link1: false,
      up_link2: true,
      down_link1: false,
      down_link2: true
    }
  },
  created () {
    console.log(this.$store.state.jurisdiction)
    if (this.$store.state.jurisdiction === 0) {
      alert('校验文件无效!')
    } else if (this.$store.state.jurisdiction === 1) {
      this.up_link1 = true
      this.up_link2 = false
    } else if (this.$store.state.jurisdiction === 2) {
      this.down_link1 = true
      this.down_link2 = false
    } else if (this.$store.state.jurisdiction === 3) {
      this.up_link1 = true
      this.up_link2 = false
      this.down_link1 = true
      this.down_link2 = false
    }
  },
  methods: {
    warntext: function () {
      alert('暂未开放！')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn_go{
  width:100%;
  height:100%;
  opacity: 0;
}
.math{
  background:url(../../assets/math/1.0/1-assets/mathbg_1.png);
  width:1280px;
  height:720px;
  position: relative;
  text-align: center;
  margin:0 auto;
}
.close{
  background:url(../../assets/math/1.0/1-assets/close.png) no-repeat;
  width:55px;
  height:55px;
  position: absolute;
  top:30px;
  right:20px;
}
.title{
  background:url(../../assets/math/1.0/1-assets/title.png) no-repeat;
  width:370px;
  height:150px;
  position: absolute;
  top:30px;
  left:470px;
}
.nav1{
  background:url(../../assets/math/1.0/1-assets/mathgrade1.png) no-repeat;
  width:200px;
  height:150px;
  position: absolute;
  top:130px;
  left:110px;
}
.nav2{
  background:url(../../assets/math/1.0/1-assets/mathgrade2_on.png) no-repeat;
  width:200px;
  height:150px;
  position: absolute;
  top:180px;
  left:570px;
}
.nav3{
  background:url(../../assets/math/1.0/1-assets/mathgrade3_on.png) no-repeat;
  width:200px;
  height:150px;
  position: absolute;
  top:210px;
  right:80px;
}
.shang{
  background:url(../../assets/math/1.0/1-assets/up.png) no-repeat;
  width:520px;
  height:150px;
  position: absolute;
  top:280px;
  left:110px;
}
.xia{
  background:url(../../assets/math/1.0/1-assets/down.png) no-repeat;
  width:520px;
  height:150px;
  position: absolute;
  bottom:115px;
  right:60px;
}
.shang1{
  background:url(../../assets/math/1.0/1-assets/1.png) no-repeat;
  width:80px;
  height:120px;
  position: absolute;
  top:280px;
  left:200px;
}
.shang2{
  background:url(../../assets/math/1.0/1-assets/2.png) no-repeat;
  width:80px;
  height:120px;
  position: absolute;
  top:325px;
  left:300px;
}
.shang3{
  background:url(../../assets/math/1.0/1-assets/3.png) no-repeat;
  width:80px;
  height:120px;
  position: absolute;
  top:315px;
  left:390px;
}
.shang4{
  background:url(../../assets/math/1.0/1-assets/4.png) no-repeat;
  width:80px;
  height:120px;
  position: absolute;
  top:320px;
  left:485px;
}
.xia1{
  background:url(../../assets/math/1.0/1-assets/1.png) no-repeat;
  width:80px;
  height:120px;
  position: absolute;
  top:460px;
  right:405px;
}
.xia2{
  background:url(../../assets/math/1.0/1-assets/2.png) no-repeat;
  width:80px;
  height:120px;
  position: absolute;
  top:500px;
  right:305px;
}
.xia3{
  background:url(../../assets/math/1.0/1-assets/3.png) no-repeat;
  width:80px;
  height:120px;
  position: absolute;
  top:490px;
  right:215px;
}
.xia4{
  background:url(../../assets/math/1.0/1-assets/4.png) no-repeat;
  width:80px;
  height:120px;
  position: absolute;
  top:495px;
  right:125px;
}
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
